$(function () {
    var WinHeigh = $(window).height();
    // $("[name='p1']").height(WinHeigh);
    Screen.OnReSize(function (ResizedWinWidth, ResizedWinHeight, scale) {
        $("[name='p1']").height(ResizedWinHeight);
    });
    fixTheme();
    bindMenuEvent();
    //$('.ui.accordion').accordion();
   
});

var Screen = function (CB) {
    var WinWidth = $(window).width();
    var WinHeigh = $(window).height();

    var OnReSize = function (CB) {
        var ResizedWinWidth = $(window).width();
        var ResizedWinHeight = $(window).height();
        var scale_w = ResizedWinWidth / WinWidth;
        var scale_h = ResizedWinHeight / WinHeigh;
        var scale = scale_w >= scale_h ? scale_h : scale_w;
        if (CB) {
            CB(ResizedWinWidth, ResizedWinHeight, scale);
        }
        window.onresize = function () {
            OnReSize(CB);
        }
    };

    return {
        OnReSize: OnReSize
    }


}();

var fixTheme = function () {
    $(".markdown").find("table").addClass("ui selectable  inverted table");
    $(".markdown").find("pre").addClass("ui  segment");
    $(".markdown").find(".language-flow").each(function () {
        var code = $(this).text();
        flowCodeToChart(code, $(this));
    });
    $(".markdown").find("h1,h2,h3,h4,h5,h6,h7,h8").each(function () {
        var text = $(this).text();
        $(this).attr("id", text);
    });
}

var bindMenuEvent = function () {
    var hrefSub = location.href.split('#');
    var titleId = decodeURI(hrefSub[1]);
    $("[title='"+titleId+"']").addClass("active");

    $("[name='p1']").find("div.item").click(function () {
        if ($(this).find('.menu').hasClass('unShow')) {
            $(this).find('.menu').removeClass('unShow');
        } else {
            $(this).find('.menu').addClass('unShow');
        }
    });
    $("[name='p1']").find("a.item").click(function (e) {
        e.stopPropagation();
        $("[name='p1']").find("a.item").removeClass('active');
        $(this).addClass("active");
    })

}

var UUID = function (len, radix) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    var uuid = [],
        i;
    radix = radix || chars.length;

    if (len) {
        // Compact form
        for (i = 0; i < len; i++)
            uuid[i] = chars[0 | Math.random() * radix];
    } else {
        // rfc4122, version 4 form
        var r;

        // rfc4122 requires these characters
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';

        // Fill in random data.  At i==19 set the high bits of clock sequence as
        // per rfc4122, sec. 4.1.5
        for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
                r = 0 | Math.random() * 16;
                uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
            }
        }
    }

    return uuid.join('');
}

var flowCodeToChart = function (flowCode, objContainer) {
    console.log(flowCode);
    var chart;
    var id = UUID(8, 16);
    if (flowCode && flowCode != "") {
        chart = flowchart.parse(flowCode.replace(/\"/g, ""));
        objContainer.html("");
        objContainer.append("<div id='canvas_" + id + "'></div>");
    }
    chart.drawSVG('canvas_' + id, {
        // 'x': 30,
        // 'y': 50,
        'line-width': 1,
        'maxWidth': 2, //ensures the flowcharts fits within a certian width
        'line-length': 30,
        'text-margin': 10,
        'font-size': 12,
        'font': 'normal',
        'font-family': 'Helvetica',
        'font-weight': 'normal',
        'font-color': 'black',
        'line-color': 'black',
        'element-color': 'black',
        'fill': 'white',
        'yes-text': 'yes',
        'no-text': 'no',
        'arrow-end': 'block',
        'scale': 1,
        'symbols': {
            'start': {
                'font-color': 'red',
                'element-color': 'green',
                'fill': 'yellow'
            },
            'end': {
                'class': 'end-element'
            }
        },
        'flowstate': {
            'client': {
                'fill': 'yellow',
                'font-size': 12
            },
            'server': {
                'fill': '#CCCCCC',
                'font-size': 12
            },
            'past': {
                'fill': '#CCCCCC',
                'font-size': 12
            },
            'current': {
                'fill': 'yellow',
                'font-color': 'red',
                'font-weight': 'bold'
            },
            'future': {
                'fill': '#FFFF99'
            },
            'request': {
                'fill': 'blue'
            },
            'invalid': {
                'fill': '#444444'
            },
            'approved': {
                'fill': '#58C4A3',
                'font-size': 12,
                'yes-text': 'APPROVED',
                'no-text': 'n/a'
            },
            'rejected': {
                'fill': '#C45879',
                'font-size': 12,
                'yes-text': 'n/a',
                'no-text': 'REJECTED'
            }
        }
    });
}